<template>
  <div class="app-container">
    <el-card class="table_style">
      <el-form ref="ruleForm" :model="permission" :rules="rules" label-width="100px">
        <el-form-item label="上级菜单" prop="parentId">
          <!--cascaderProps：用来指定数据对象。putAway：为选中选项后自动收起选择框属性。expand-trigger：设置鼠标放上去显示数据-->
          <el-cascader
            v-if="isEdit === true && permission.parentId === 0"
            ref="putAway"
            v-model="permission.parentId"
            :options="menus"
            expand-trigger="hover"
            :props="cascaderProps"
            style="width: 400px"
            clearable
            disabled
            filterable
            placeholder="顶级菜单"
            @change="handleChange"
          />
          <el-cascader
            v-else
            ref="putAway"
            v-model="permission.parentId"
            :options="menus"
            expand-trigger="hover"
            :props="cascaderProps"
            style="width: 400px"
            clearable
            filterable
            placeholder="顶级菜单"
            @change="handleChange"
          />
        </el-form-item>

        <el-form-item label="权限等级" prop="level">
          <el-input v-model.number="permission.level" />
        </el-form-item>
        <el-form-item label="权限名称" prop="title">
          <el-input v-model="permission.title" />
        </el-form-item>
        <el-form-item label="路由名称" prop="name">
          <el-input v-model="permission.name" />
        </el-form-item>
        <el-form-item label="访问路径" prop="path">
          <el-input v-model="permission.path" />
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="permission.icon" />
        </el-form-item>

        <el-form-item label="路由设置">
          <el-radio-group v-model="permission.router" size="medium">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="请求方法" prop="method">
          <el-input v-model="permission.method" />
        </el-form-item>
        <el-form-item label="请求接口" prop="api">
          <el-input v-model="permission.api" />
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="permission.sort" :min="1" :max="99" @change="handleChange" />
        </el-form-item>

        <el-form-item>
          <el-button @click="resetForm('ruleForm')">重置表单</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">{{ isEdit ? "立即更新" : "立即创建" }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { fetchPermissionList, fetchPermission, createPermission, updatePermission } from '@/api/permission'

export default {
  name: 'PermissionForm',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      menus: [],
      permission: {
        parentId: 0,
        level: 1,
        title: '',
        name: '',
        path: '',
        component: '',
        icon: '',
        router: 1,
        method: '',
        api: '',
        sort: 0
      },
      // 指定级联选择器的配置对象
      cascaderProps: {
        checkStrictly: true, // 是否选择任意一级的选项
        value: 'id',
        label: 'title',
        children: 'children'
      },
      rules: {
        title: [
          {
            required: true,
            message: '请输入权限名称',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 8,
            message: '长度在 2 到 8 个字符',
            trigger: 'blur'
          }
        ],
        level: [
          {
            required: true,
            message: '请输入权限等级',
            trigger: 'blur'
          },
          { type: 'number', required: true, message: '权限等级必须是数字', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.init()
    // 如果是编辑
    if (this.isEdit) {
      this.fetchData()
    }
  },
  methods: {
    async init() {
      const res = await fetchPermissionList()
      this.menus = res.data.menus
    },
    async fetchData() {
      // 获取当前要编辑的权限
      const info = await fetchPermission(this.$route.params.id)
      this.permission = info.data.permission
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (!valid) return
        let res
        if (this.isEdit) {
          const id = this.$route.params.id
          res = await updatePermission(id, this.permission)
        } else {
          res = await createPermission(this.permission)
        }
        if (res.code === 20000) this.$message.success(res.message)
        this.$router.push({ name: 'Permission' })
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleChange(value) {
      this.$refs.putAway.toggleDropDownVisible() // 选完选项后自动关闭选项框
      if (value.length > 0) { // 如果 value 值大于 0，说明已经选中了父级权限
        this.permission.parentId = value[value.length - 1] // 父级权限的 id 值
        // 若选中了权限就设置当前选中权限的等级
        this.permission.level = value.length - 1
      }
      // 否则重置父级权限 id
      // this.permission.parentId = 0
    }
  }
}
</script>
